<template>
    <div>
		<div id="main" class="hander-car">
			<div class="store-content">
				<div class="cart-box">
					<div class="title">
						<h2>购物清单</h2>
					</div>
					<div class="cart-inner">
						<div class="empty-label hide">
							<h3>您的购物车中还没有商品</h3>
							<a class="link" href="javascript:;">现在选购</a>
						</div>
						<div>
							<div class="cart-table-title">
								<span class="name">商品信息</span>
								<span class="operation">操作</span>
								<span class="subtotal">小计</span>
								<span class="num">数量</span>
								<span class="price">单价</span>
							</div>
							<div class="cart-table">
								<div class="cart-group">
									<!--购物列表-->
									<div class="cart-top-items">
										<div class="cart-items" v-for="(item,index) in this.$store.state.shop.goodList" :key="item.stock_id">
											<div class="items-choose">
												<span :class="['blue-checkbox-new',{'checkbox-on':item.ischecked}]" @click="checked(index)"><a></a></span>
											</div>
											<div class="items-thumb">
												<img :src="item.image">
												<a href="javascript:;" target="_blank"></a>
											</div>
											<div class="name hide-row" >
												<div class="name-table">
													<a href="javascript:;" target="_blank">{{item.title}}</a>
													<ul class="attribute">
														<li>{{item.detail.color_name}}</li>
													</ul>
												</div>
											</div>
											<div class="operation">
												<a class="items-delete-btn" @click="setShop(index)"></a>
											</div>
											<div class="subtotal">¥ {{item.price*item.num}}</div>
											<div class="item-cols-num">
												<div class="select js-select-quantity">
													<span class="down" @click="setNum(index,-1)">-</span>
													<span class="num">
														<input type="text" :value="item.num" style="display: inline-block;">
													</span>
													<span class="up" @click="setNum(index,1)">+</span>
												</div>
											</div>
											<div class="price">¥ {{item.price}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="cart-bottom-bg fix-bottom">
						<div class="cart-bar-operation">
							<div>
								<div class="choose-all js-choose-all">
									<span :class="['blue-checkbox-new',{'checkbox-on':BooL.AllCkecked}]" @click="setAllChecked"><a></a></span>
									全选
								</div>
								<div class="delete-choose-goods" @click="removShop">删除选中的商品</div>
							</div>
						</div>
						<div class="shipping">
							<div class="shipping-box">
								<div class="shipping-total shipping-num">
									<h4 class="">
										已选择 <i>{{BooL.yChoice}}</i> 件商品
									</h4>
									<h5>
										共计 <i>{{BooL.number}}</i> 件商品
									</h5>
								</div>
								<div class="shipping-total shipping-price">
									<h4 class="">
										应付总额：<span>￥</span><i >{{BooL.TotalPrice}}</i>
									</h4>
									<h5 class="shipping-tips">
										应付总额不含运费
									</h5>
									
								</div>
							</div>
							<span class="jianguo-blue-main-btn big-main-btn js-checkout disabled-btn"><a>现在结算</a></span>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
      data(){
        return{
          num:0
        }
      },
        methods:{
             //单选
             checked(index){
                 this.$store.commit("shop/checked",index)
            },
            //全选
            setAllChecked(){
              this.$store.commit('shop/setAllChecked',this.BooL.AllCkecked)
            },
            //添加数量
            setNum(index,num){
                this.$store.commit('shop/setNum',{index,num})
            },
            //删除选择的商品
          removShop(){
               this.$store.commit('shop/removShop')
          },
          //点击删除商品
          setShop(index){
               this.$store.commit('shop/setShop',index)
          }
          },
        computed:{
              BooL(){
               return  this.$store.getters["shop/setAllChecked"]
          }
        }
    }
</script>

<style src='../assets/css/cart.css' scoped>

</style>